<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负载均衡监听</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <style>
        .bootstrap-select{
            width: 100% !important;
        }
    </style>
</head>
<body>

<!--监听页面-->
<div class="layui-container" style="width: 100%;margin-top: 20px;">
    <div class="layui-row" style="margin-top: 10px;">
        <!--<div class="layui-col-md3 ">-->
            <!--<input type="text" id="warnName1"  required  placeholder="请输入名称" autocomplete="off" class="form-control">-->
        <!--</div>-->

        <div class="layui-col-md3 " style="padding-left: 20px;">
            <!--<a class="btn btn-default" id="search1">查询</a>-->
            <a class="btn btn-warning" id="return">返回</a>
        </div>
    </div>

    <div class="layui-row table-striped" style="margin-top: 10px;padding:0 0px;">
        <table id="details-table" data-mobile-responsive="true"></table>
    </div>
</div>
<script>


    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    $(function(){
        console.log(getQueryString('id'),'sssssssssssssss')
        init(getQueryString('id'));

        $('#search').click(function(){
            $('#details-table').bootstrapTable('refresh');
        })
        $('#return').click(function(){
            window.history.back()
        })
    });

    //初始化
    function init(id){
        $('#details-table')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : baseURL + 'aliyunSlb/findAliyunListenerportsPage', // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    showExport :true,
                    sortable: true,
                    sortName:"userId",// 排序列名称
                    sortOrder: "desc",
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit+'',
                            page : (params.offset/params.limit)+1+'',
                            slbId:id
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        // {
                        //     checkbox : true
                        // },
                        {
                            field : 'listenerProtocol', // 列字段名
                            title : '前端协议', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'listenerPort', // 列字段名
                            title : '前端端口', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'backendServerPort', // 列字段名
                            title : '后端端口', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'healthCheckHttpcode', // 列字段名
                            title : 'HTTP状态码', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'scheduler', // 列字段名
                            title : '调度算法', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'stickySession', // 列字段名
                            title : '会话保持', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'healthCheck', // 列字段名
                            title : '健康检查', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'aclType', // 列字段名
                            title : '访问控制', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'bandWidth', // 列字段名
                            title : '宽带峰值', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'vserverGroupId', // 列字段名
                            title : '服务器组', // 列标题
                            align : 'center'

                        },
                        {
                            field : 'listenerForward', // 列字段名
                            title : '是否启用监听转发', // 列标题
                            align : 'center',
                            formatter : function(value, row,index) {
                                return value==0?'开启':'关闭'
                            }

                        }]
                });
    }
</script>
</body>
</html>